<template>
  <div class="container">
    <button @click="refreshPage">刷新整个网站</button>
    <!-- 面包屑 -->
    <XtxBread>
      <XtxBreadItem to="/">首页</XtxBreadItem>
      <XtxBreadItem :to="'/category/' + categoryItem.id1">{{
        categoryItem.name1
      }}</XtxBreadItem>
      <transition name="fadeBread" mode="out-in">
        <XtxBreadItem :key="categoryItem.id2">{{
          categoryItem.name2
        }}</XtxBreadItem>
      </transition>
    </XtxBread>

    <!-- <XtxCheckbox :modelValue="bol" @update:modelValue="bol = $event"
      >测试多选框</XtxCheckbox
    > 
    vue2:
      父传子
         子组件标签 :value="fatherValue"
         子组件内：
            props:['value']
      子传父
        子组件标签  @input="fatherValue=$event"
        子组件内：
           model:{
             prop:'value',
             event:'input'
           }
           this.$emit('input',值)
      父组内上   子组件标签  v-model="fatherValue"


      vue3:
        父传子
          子组件标签  :modelValue="fatherValue"
          子组件内： 
          props:['modelValue']

        子传父
          子组件标签  @update:modelValue="fatherValue=$event"
          子组件内：
            setup(props,{emit}){
              emit('update:modelValue',值)
            }

        父组件内：  子组件标签  v-model:modelValue="fatherValue"
        当父传子属性为modelValue时，它是可以省的，一个组件上可以使用多个v-model:属性名=“值” 
    
    
    -->
    <!-- <XtxCheckbox v-model="bol">测试多选框</XtxCheckbox> -->
    <!-- 筛选区域
      1:创建组件，导入使用
      2：定义api获取数据并渲染
      3：完成筛选功能，
             1:所有的全部默认选中
             2：点击其它项切换选中
      4：需要暴露出筛选数据（通知父组件）
 -->
    <SubFilter @change="change"></SubFilter>
    <!-- 排序组件 -->
    <div class="sort">
      <SubSort @change="change"></SubSort>
      <!-- 产品列表
      1：基本布局
      2：定义api，导入调用
         筛选与排序 条件修改后，都需要重新调用接口(参数要合并)
      3：封装上拉加载组件   
          a：当切换二级分类时，参数id要一起修改  
          b:分页问题  
          需求：滚动条滚动到最底部就调用接口获取数据
          c:加载过程中处理分页
          d:处理loading,finished,finished-text等参数问题
          1:
       -->
      <!-- 列表 -->
      <ul>
        <li v-for="i in list" :key="i.id">
          <GoodsItem :goods="i" />
        </li>
      </ul>
      <XtxList
        v-if="bol"
        @load="load"
        :loading="loading"
        :finished="finished"
        finished-text="没有更多数据需要加载了！"
      ></XtxList>
    </div>
  </div>
</template>
<script>
import {
  onBeforeMount,
  onMounted,
  computed,
  ref,
  watch,
  nextTick,
  inject
} from 'vue'
import { useStore } from 'vuex'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import GoodsItem from './components/goods-item.vue'
import { categoryGoods } from '@/api/category'
export default {
  components: {
    SubFilter,
    SubSort,
    GoodsItem
  },
  setup () {
    // onBeforeMount(() => {
    //   console.log('onBeforeMount:二级类目')
    // })
    // onMounted(() => {
    //   console.log('onMounted:二级类目')
    // })
    /*
    处理面包屑数据
    已知:分类列表[{id,name,children:[{id2,name2}]}}]
    */
    const store = useStore()
    const route = useRoute()
    const categoryItem = computed(() => {
      let _obj = { id1: '', name1: '', id2: '', name2: '' }
      store.state.category.list.forEach(item => {
        if (item.children) {
          item.children.forEach(item2 => {
            if (item2.id === route.params.id) {
              _obj = {
                id1: item.id,
                name1: item.name,
                id2: item2.id,
                name2: item2.name
              }
            }
          })
        }
      })
      return _obj
    })
    // 筛选结果
    // function change (params) {
    //   listParams = { ...listParams, ...params, page: 1 }
    //   list.value = []
    //   loading.value = false
    //   finished.value = false
    //   initList()
    // }
    // 排序筛选
    function change (params) {
      // 合并参数,让页码回到第一页
      listParams = { ...listParams, ...params, page: 1 }
      // 清空数据
      list.value = []
      // 还原loading,与finished值
      loading.value = false
      finished.value = false
      // 组件初始化
      initList()
    }

    // 获取商品列表数据
    // 当切换分类时，重新获取id
    const stop = watch(
      () => route.params.id,
      () => {
        listParams.categoryId = route.params.id
      }
    )
    // 离开页面时，销毁watch
    onBeforeRouteLeave(() => {
      stop()
    })
    // 列表接口所用参数
    let listParams = {
      categoryId: route.params.id,
      page: 1,
      pagesize: 5
    }
    // 列表数据
    const list = ref([])
    // 接口调用获取数据
    // 加载中的参数
    const loading = ref(false)
    const finished = ref(false)
    function load () {
      // 调用接口时将loading修改为加载中
      loading.value = true
      categoryGoods(listParams).then(res => {
        console.log('二级列表数据', res)
        // 加载一次，分页增加一次
        listParams.page++
        // 接口调用完成，将loading修改为false
        loading.value = false
        // 累加数据
        list.value.push(...res.result.items)
        // 判断是否加载完成
        if (list.value.length >= res.result.counts) {
          finished.value = true
        }
        // 强制让list组件重新执行监听
        initList()
      })
    }
    // 初始化list组件
    const bol = ref(true)
    function initList () {
      bol.value = false
      nextTick(() => {
        bol.value = true
      })
    }
    const reload = inject('reload')
    function refreshPage () {
      reload()
    }

    return {
      categoryItem,
      change,
      list,
      load,
      finished,
      loading,
      bol,
      refreshPage
    }
  }
}
</script>
<style lang="less" scoped>
.sort {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>
